<div class="main">
  <div class="person-info__wrapper border-bottom-line">
    <div class="item person-info">
      <img src="{{ pageData.picture | default('../public/img/tan_info.jpg', true) }}" alt="">
      <h2>Address</h2>
      <p>{{ pageData.address }}</p>
      <h2>Contact Information</h2>
      <!--<p>tan@hnu.edu.cn</p>-->
      <p>{{ pageData.contact }}</p>
    </div>
    <div class="person-desc">
      <div class="desc-basic">
        <h1>Prof.{{ pageData.teachername }}</h1>
        <p>{{ pageData.role }}</p>
      </div>
      <div class="desc-subject">
        <h1>Biography</h1>
        <!--<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>-->
        <p>{{ pageData.biography }}</p>
      </div>
    </div>
  </div>
  <div class="person-education border-bottom-line">
    <h2 class="person-item__title">Education</h2>
    <!-- timeline -->
    <div class="timeline">
      <div class="timeline-body">
        <ul class="timeline-ul">
          {% for education in pageData.educations %}
          <li>
            <div class="timeline-bullet"></div>
            <span class="timeline-item__time">{{ education.year }}</span>
            <span class="timeline-item__title">{{ education.degree }}</span>
            <p class="timeline-item__txt">{{ education.school }}</p>
          </li>
          {% endfor %}
          <!--<li>-->
            <!--<div class="timeline-bullet"></div>-->
            <!--<span class="timeline-item__time">1993</span>-->
            <!--<span class="timeline-item__title">Ph.D</span>-->
            <!--<p class="timeline-item__txt">University of Michigan</p>-->
          <!--</li>-->
          <!--<li>-->
            <!--<div class="timeline-bullet"></div>-->
            <!--<span class="timeline-item__time">1993</span>-->
            <!--<span class="timeline-item__title">M. Sc</span>-->
            <!--<p class="timeline-item__txt">Chinese Academy of Sciences</p>-->
          <!--</li>-->
          <!--<li>-->
            <!--<div class="timeline-bullet"></div>-->
            <!--<span class="timeline-item__time">1993</span>-->
            <!--<span class="timeline-item__title">B. Sc.</span>-->
            <!--<p class="timeline-item__txt">Hunan Normal University</p>-->
          <!--</li>-->
        </ul>
      </div>
    </div>
  </div>
  <div class="person-research border-bottom-line">
    <h2 class="person-item__title">Research Interest</h2>
    <!--<p>Biography chemistry, Biography chemistry, Biography chemistry, Biography chemistry, Biography chemistry,</p>-->
    <p>{{pageData.interest}}</p>
  </div>
  <div class="person-publication border-bottom-line">
    <h2 class="person-item__title">Selected Publications</h2>
    {% for article in pageData.articles %}
    <section class="publication-item">
      <h3>{{ article.title }}</h3>
      <p>{{ article.name }}</p>
      <p>Nature Comunication: DOI: <span class="mark">10.714/thno.38261</span></p>
    </section>
    {% else %}
    <p>暂无。。。</p>
    {% endfor %}
  </div>
  <div class="person-awards border-bottom-line">
    <h2 class="person-item__title">Awards and Prizes</h2>
    <!-- timeline -->
    <div class="timeline">
      <div class="timeline-body">
        <ul class="timeline-ul">
          <!--awards-->
          {% for award in pageData.awards %}
          <li>
            <div class="timeline-bullet"></div>
            <span class="timeline-item__time">{{ award.year }}</span>
            <p class="timeline-item__txt">{{ award.award }}</p>
          </li>
          {% endfor %}
          <!--<li>-->
            <!--<div class="timeline-bullet"></div>-->
            <!--<span class="timeline-item__time">1993</span>-->
            <!--<p class="timeline-item__txt">the Associate Editor of Analytical Chemistry </p>-->
          <!--</li>-->
        </ul>
      </div>
    </div>
  </div>
</div>
